<template>
  <div class="home">
    <div class="home_header">
      <ImgT src="/imgs/home/logo.png" class="header_logo" alt="" />
      <div class="header_right">
        <template v-if="!hasLogin">
          <nut-animate type="ripple" action="click" @click="async () => { await User(pinia).setLogin(true) }">
            <div class="header_button login">{{ t('home_page_login') }}</div>
          </nut-animate>
          <nut-animate type="ripple" action="click" @click="openRegister">
            <div class="header_button signup">{{ t('home_page_signUp') }}</div>
          </nut-animate>
        </template>
        <template v-else>
          <div class="user_info_mon">
            <ImgT src="/imgs/home/coin.webp" style="width: 20px" alt="" />
            <div class="user_info_mon_text">{{ Intl.NumberFormat().format(roleInfo.money) }}
            </div>
            <iconpark-icon name="wallrticontongy01" :class="refreshFlag && 'refresh'" size="24"
              @click="refreshWallet" />
          </div>
        </template>
        <nut-popover overlay-class="hideColor" bg-color="transparent" v-model:visible="languagesShow"
          location="bottom-end">
          <template #reference>
            <nut-animate type="ripple" action="click">
              <ImgT :src="`/imgs/home/${lang.slice(0, 2)}.png`" class="header_languages" alt="" />
            </nut-animate>
          </template>
          <template #content>
            <div class="languages_popover">
              <div class="languages_popver--item-container" @click="() => chooseLanguages(item)"
                v-for="(item, index) of settings.lang_list" :key="index">
                <div class="languages_popver--item">
                  <ImgT class="languages_img" :src="`/imgs/home/${item.name}.png`" alt="" />
                  <div>{{ t(item.name) }}</div>
                </div>
                <div v-if="index !== 2" class="item_line"></div>
              </div>
            </div>
          </template>
        </nut-popover>
      </div>
    </div>
    <div class="home_content">
      <div class="home_download" v-if="downloadShow">
        <div class="download_left">
          <div class="download_logo"></div>
          <div class="download_tips">
            <div class="download_tips--top">PK Bet APP</div>
            <div class="download_tips--bottom">{{ t('home_page_download_tip') }}</div>
          </div>
        </div>
        <div class="download_right">
          <span class="btn_block" @click="download">{{ t('home_page_download') }}</span>
          <iconpark-icon name="tongyiconguanb01" size="16px" @click="closeDownload"
            style="margin: 0 8px 0 12px;"></iconpark-icon>
        </div>
      </div>

      <div class="home_swipe">
        <nut-swiper :init-page="0" pagination-color="#FFF" pagination-unselected-color="#DDD" v-if="bannerArr">
          <nut-swiper-item v-for="(item, index) in bannerArr" :key="index" class="swiper_imgs">
            <ImgT :src="t(item)" style="height: 100%; width: 100%" draggable="false" />
          </nut-swiper-item>
        </nut-swiper>
        <nut-noticebar v-if="showNoticeBar" :style="{ opacity: showNoticeBar ? 1 : 0, transition: 'opacity ease .2s' }"
          @across-end="endToChangeNotice" class="swiper_message" :speed="50" background="rgba(0,0,0,0.5)"
          color="#ffffff" :text="noticeMessage" :scrollable="true">
          <template #left-icon>
            <iconpark-icon name="tongzhiiconlind" size="16px" style="margin: 0 2px 0 2px;"></iconpark-icon>
          </template>
        </nut-noticebar>
      </div>
      <div class="home_grid">
        <div class="grid_item" v-for="(item, index) in plateList" :key="index">
          <nut-popover bg-color="transparent" v-model:visible="item.visible" location="bottom-start">
            <template #reference>
              <nut-animate type="ripple" action="click">
                <div @click="toPage(item)">
                  <div class="grid_icon">
                    <nut-badge :dot="myEmail.hasNoRead" color="#E11313" top="10" :hidden="item.id != 'email'">
                      <ImgT :src="`/imgs/home/grid${index + 1}.webp`" class="grid_icon--img" alt="" />
                    </nut-badge>
                  </div>
                  <div class="grid_text">{{ t(item.title) }}</div>
                </div>
              </nut-animate>
            </template>
            <template #content>
              <div class="grid_popover" :class="item.class">
                <div @click="openLink(v)" class="grid_popver--item" v-for="(v, j) of settings[item.dataKey]" :key="j">
                  <iconpark-icon :icon-id="gridIcon[v.icon]" color="#fff" size="2rem"></iconpark-icon>
                  <span style="margin-left: 4px;">{{ t(v.name_key) }}</span>
                </div>
              </div>
            </template>
          </nut-popover>
        </div>
      </div>

      <div class="home_main">
        <div class="main-content">
          <div class="aside_item" v-for="(item, key) of gameTabs" :class="tabActive === item.value && 'active_item'"
            :key="key" @click="changeTabActive(item.value)">
            <!-- <nut-animate type='float' :loop='true'>
              <ImgT v-show="tabActive === item.value" :src="item.tabImg1" class="tab_style" alt="" />
            </nut-animate> -->
            <SvgaItem :keyStr="key" :name="item.names" :active="tabActive === item.value" class="tab_style" />
            <!-- <ImgT v-show="tabActive !== item.value" :src="item.tabImg2" class="tab_style" alt="" /> -->
            <span class="aside_item--text">{{ t(item.key) }}</span>
          </div>
        </div>

        <div class="game_list">
          <nut-grid :gutter="10" :column-num="3">
            <nut-grid-item v-for="(item, index) of curPlatMap.gameList" :key="item" class="main-list-item"
              :class="{ layout_item_1: tabActive === 4 && index === 0, layout_item_2: tabActive === 6 }"
              @click.stop="toGameDetail(item)">
              <GameImg :item="item"></GameImg>
            </nut-grid-item>
          </nut-grid>
          <!--  <div v-for="(item, index) of curPlatMap.gameList" :key="item" class="main-list-item"
            :class="{ layout_item_1: tabActive === 4 && index === 0, layout_item_2: tabActive === 6 }"
            @click.stop="toGameDetail(item)"> -->
          <!-- <template v-show="tabActive === 4 && index === 0">
              <img :src="`http://18.162.112.52:8033/uploads/${item.logo_h5}`" class="main-list-item-img" alt="">
              <img :src="`http://18.162.112.52:8033/uploads/${item.picture_h5}`" class="main-list-item-img2" alt="">
            </template>
            <template v-show="tabActive === 6">
              <img :src="`http://18.162.112.52:8033/uploads/${item.logo_h5}`" class="main-list-item-img" alt="">
              <img :src="`http://18.162.112.52:8033/uploads/${item.picture_h5}`" class="main-list-item-img2" alt="">
            </template>
            <template > -->
          <!-- {{ item }} -->
          <!-- <GameImg :item="item"></GameImg> -->
          <!-- <nut-image :src="`http://18.162.112.52:8033/uploads/${item.logo_h5}`" v-if="!item.visible"
              class="main-list-item-img" :class="(index === 5 && tabActive === 0) && 'order_img'" :show-loading="false"
              @error="onError(index)">
              <template #loading>
                <div></div>
              </template>
            </nut-image>
            <nut-image :src="`http://18.162.112.52:8033/uploads/${item.picture_h5}`" class="main-list-item-img2">
              <template #loading>
                <Loading width="16" height="16"></Loading>
              </template>
            </nut-image> -->
          <!-- </template> -->
          <!-- <p class="title">{{ item.name[lang] }}</p> -->
          <!-- </div> -->

        </div>

      </div>

    </div>
    <!-- 应用程序弹窗 -->
    <shareModal v-model:visible="visible"></shareModal>
    <OverLoading v-model:visible="isLoading"></OverLoading>
  </div>
</template>

<script setup lang='ts'>
import { computed, nextTick, onBeforeMount, onMounted, onUnmounted, reactive, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { Page } from '@/store/page';
import pinia from '@/store/index';
import { User } from '@/store/user';
import { useI18n } from 'vue-i18n';
import { handleOpenLink } from '@/utils/publicMethods'
import { useRouter } from "vue-router";
import { Local, Session } from "@/utils/storage";
import shareModal from '../me/components/shareModal.vue'
import OverLoading from '@/components/Loading.vue'
import { i18n } from '@/languages';
import { NetPacket } from '@/netBase/NetPacket';
// import { Net } from '@/net/Net';
import H5Websocket from "@/net/Net1";
import { showToast } from '@nutui/nutui'
import { NetMsgType } from '@/netBase/NetMsgType';
import { MessageEvent2 } from '@/net/MessageEvent2';
import SvgaItem from "@/components/SvgaItem.vue"
import GameImg from "@/components/GameImg.vue"
// import { Loading } from '@nutui/icons-vue'


const listContainerHeight = ref(0)
const { t } = useI18n();
const page = Page(pinia);
const user = User(pinia);
const router = useRouter()
const {
  hasLogin,
  roleInfo,
  myEmail
} = storeToRefs(user);
const {
  lang,
  bannerArr,
  textAnnouncement,
  settings,
  homeGameData
} = storeToRefs(page);


onMounted(() => {
  i18n.global.locale.value = lang.value
  nextTick(() => {
    listContainerHeight.value = document.getElementById('scrollContainer')?.offsetHeight || 0
  })
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_3rd_game_login_result,
    gameUrlResult,
  );
})
const target = ref()
// 登录注册c:\Users\28980\Desktop\new\html_page\game_loading
const openRegister = async () => {
  await User(pinia).setReg(true)
}
// 刷新余额
const refreshFlag = ref(false); //刷新标记
const timerRe = ref();
const refreshWallet = () => {
  if (!refreshFlag.value) {
    clearTimeout(timerRe.value);
    refreshFlag.value = true;
    getNewMon();
    timerRe.value = setTimeout(() => {
      refreshFlag.value = false
    }, 1 * 1000)
  }
}
const getNewMon = () => {
  const req = NetPacket.req_roleinfo_with_id();
  req.id = roleInfo.value.id;
  // Net.instance.sendRequest(req); 
  H5Websocket.sendMessageHandler(req);
}
// 语言选择
const languagesShow = ref(false)
const chooseLanguages = async (item: any) => {
  languagesShow.value = false
  Local.set('lang', item.value)
  i18n.global.locale.value = item.value
  await Page(pinia).setLang(item.value)
  resetNotice()
}
// 下载
const downloadShow = ref(true)
const closeDownload = () => {
  downloadShow.value = false
}
const download = () => {
  setTimeout(() => {
    window.open('https://csbylm.axshare.com/#id=ayacg7&p=%E7%89%88%E6%9C%AC%E8%AE%B0%E5%BD%95')
  }, 300)
}
// notice
const noticeStartIndex = ref(0)
const showNoticeBar = ref(true)
const endToChangeNotice = () => { // 轮播消息结束触发的事件
  showNoticeBar.value = false
  setTimeout(() => {
    showNoticeBar.value = true
  }, 400)
  setTimeout(() => {
    noticeStartIndex.value += 1
    const index = noticeStartIndex.value
    const length = textAnnouncement.value.length
    if (index >= length) {
      noticeStartIndex.value = 0
    }
  }, 300)
}
const noticeMessage = computed(() => { // 轮播消息
  if (textAnnouncement.value) {
    const index = noticeStartIndex.value
    return t(textAnnouncement.value[index])
  }
  return ''
})
const noticeDestoryKey = ref(true)
const resetNotice = () => { // 重置轮播消息状态
  noticeDestoryKey.value = false
  noticeStartIndex.value = 0
  noticeDestoryKey.value = true
}
// grid
const plateList = reactive([
  { title: "Community", visible: false, dataKey: "community_list", class: 'community' },
  { title: "contact_us", visible: false, dataKey: "service_list", class: 'service' },
  { title: "mail_message", visible: false, dataKey: "", id: 'email' },
  { title: "app", visible: false, dataKey: "", id: 'app' },
])
const gridIcon: any = {
  facebook: 'iconcommunity01',
  telegram: 'iconcommunity02',
  youtube: 'iconcommunity03',
}
const visible = ref(false)
const isLoading = ref(false)
const openLink = (item: any) => {
  if (item.url) {
    handleOpenLink(item.url)
  }
}
const toPage = (item: any) => {
  if (item.id == 'email') {
    router.push("/email")
  }
  if (item.id == 'app') {
    visible.value = true
  }
}
// 游戏tabs
const tabs: any = [
  { tabImg1: '/imgs/home/tab1.png', tabImg2: '/imgs/home/tab1-1.png', name: '热门', names: 'hot', key: 'home_page_hot', value: 0 },
  { tabImg1: '/imgs/home/tab2.png', tabImg2: '/imgs/home/tab2-1.png', name: '电子', names: 'ele', key: 'home_page_slot', value: 1 },
  { tabImg1: '/imgs/home/tab3.png', tabImg2: '/imgs/home/tab3-1.png', name: '视讯', names: 'live', key: 'home_page_live', value: 2 },
  { tabImg1: '/imgs/home/tab4.png', tabImg2: '/imgs/home/tab4-1.png', name: '捕鱼', names: 'fish', key: 'home_page_fishing', value: 3 },
  {
    tabImg1: '/imgs/home/tab7.png',
    tabImg2: '/imgs/home/tab7-1.png',
    name: '体育',
    names: 'sport',
    key: 'home_page_sportsGame',
    value: 4
  },
  {
    tabImg1: '/imgs/home/tab6.png',
    tabImg2: '/imgs/home/tab6-1.png',
    name: '棋牌',
    names: 'poker',
    key: 'home_page_pokerGame',
    value: 5
  },
  {
    tabImg1: '/imgs/home/tab5.png',
    tabImg2: '/imgs/home/tab5-1.png',
    name: '彩票',
    names: 'lottery',
    key: 'home_page_lotteryGame',
    value: 6
  }
]
let gameTabs: any = reactive([])
// const platMap: any = {
//   '热门': {
//     total: 6, imageUrl1: 'tabp1', imageUrl2: 'tabpp1', gameList: [
//       {
//         agentId: 4,  //平台id
//         gameId: '32',  //游戏id
//         kindId: '999'  // 场馆id
//       }, {
//         agentId: 1,
//         gameId: '74',
//         kindId: '999'
//       }, {
//         agentId: 4,
//         gameId: '49',
//         kindId: '999'
//       }, {
//         agentId: 6,
//         gameId: '22041',
//         kindId: '999'
//       }, {
//         agentId: 9,
//         gameId: '',
//         kindId: '999'
//       }, {
//         agentId: 17,
//         gameId: '',
//         kindId: '999'
//       },
//     ]
//   },
//   '电子': {
//     total: 12, imageUrl1: 'tabp2', imageUrl2: 'tabpp2', gameList: [
//       '+pg', '+jili', '+fc', '+jdb', '+tp', '+pp', '+cq9', '+mg', '+bng', '+ka', '+pt', '+rich88',
//     ]
//   },
//   '视讯': {
//     total: 8, imageUrl1: 'tabp3', imageUrl2: 'tabpp3', gameList: [
//       {
//         agentId: 9,
//         gameId: '',
//         kindId: '999'
//       },
//       {
//         agentId: 12,
//         gameId: '',
//         kindId: '999'
//       },
//       {
//         agentId: 29,
//         gameId: '',
//         kindId: '999'
//       },
//       {
//         agentId: 24,
//         gameId: '',
//         kindId: '999'
//       },
//       {
//         agentId: 30,
//         gameId: '',
//         kindId: '999'
//       },
//       {
//         agentId: 26,
//         gameId: '',
//         kindId: '999'
//       },
//       {
//         agentId: 10,
//         gameId: '',
//         kindId: '999'
//       },
//       {
//         agentId: 13,
//         gameId: '',
//         kindId: '999'
//       },

//     ]
//   },
//   '捕鱼': {
//     total: 8, imageUrl1: 'tabp4', imageUrl2: 'tabpp4', gameList: [
//       "+jilifish", "+fcfish", "+jdbfish", "+ksfish", "+tpfish", "+mgfish", "+v8fish", "+kafish"
//     ]
//   },
//   '体育': {
//     total: 5, imageUrl1: 'tabp5', imageUrl2: 'tabpp5', gameList: [
//       {
//         agentId: 14,
//         gameId: '',
//         kindId: '999'
//       },
//       {
//         agentId: 20,
//         gameId: '',
//         kindId: '999'
//       },
//       {
//         agentId: 15,
//         gameId: '',
//         kindId: '999'
//       },
//       {
//         agentId: '',
//         hasDetail: true, //有二级页
//         gameId: '',
//         kindId: '999'
//       },
//       {
//         agentId: 11,
//         gameId: '',
//         kindId: '999'
//       },

//     ]
//   },
//   '棋牌': {
//     total: 6, imageUrl1: 'tabp6', imageUrl2: 'tabpp6', gameList: [
//       "+v8poker", "+mppoker", "+kingmakerpoker", "+mgpoker", "+jilipoker", "+tppoker",
//     ]
//   },
//   '彩票': {
//     total: 3, imageUrl1: 'tabp7', imageUrl2: 'tabpp7', gameList: [
//       {
//         agentId: 23,
//         gameId: '',
//         kindId: '999',
//         Proportion: '1000'
//       },
//       {
//         agentId: 17,
//         gameId: '',
//         kindId: '999'
//       },
//       {
//         agentId: 21,
//         gameId: '',
//         kindId: '999'
//       },
//     ]
//   },
// }
let platMaps: any = reactive([{ name: '', gameList: [], total: 0, type: 0 }])
const tabActive = ref(0)
const GAMETYPE: any = {
  '热门': 0,
  '电子': 1,
  '视讯': 2,
  '捕鱼': 3,
  '体育': 4,
  '棋牌': 5,
  '彩票': 6
}
const curPlatMap: any = ref({})
const changeTabActive = (v: any) => {
  tabActive.value = v
  curPlatMap.value = platMaps.find((e: any) => e.type == v)
  nextTick(() => {
    listContainerHeight.value = document.getElementById('scrollContainer')?.offsetHeight || 0
  })
}

// const get3rdGameID = (gameId: string) => {
//   if (!gameId) return "";
//   return gameId.replace(/\+|fish|poker|lottery|hot/g, "");
// }
// const goGameEventy = (gameId: string) => {

//   let infos = gameId;
//   let req_enter_room_req = NetPacket.req_enter_room();
//   req_enter_room_req.room_type_id = infos[0]; //写死第一个房间的id
//   Net.instance.sendRequest(req_enter_room_req);

// }

const getHomeData = () => {
  platMaps = homeGameData.value.map((e: any) => e.three_platform.length && { name: e.name['zh-CN'] }).filter((e: any) => e)
  gameTabs = homeGameData.value.map((e: any) => e.three_platform.length && { name: e.name['zh-CN'] }).filter((e: any) => e)
  for (let i in platMaps) {
    const item = platMaps[i]
    const data = homeGameData.value.find((e: any) => e.name['zh-CN'] == item.name)
    const platforms = data.three_platform
    platMaps[i].total = data.three_platform.length
    platMaps[i].gameList = platforms
    platMaps[i].type = GAMETYPE[item.name]
  }

  for (let i in tabs) {
    const tab = tabs[i]
    for (let j in gameTabs) {
      const gameTab = gameTabs[j]
      if (gameTab?.name && tab.name == gameTab.name) {
        gameTabs[j] = tab
      }
    }
  }

  const gameTab = Session.get('activeTab') || 0
  tabActive.value = gameTab || gameTabs[gameTab].value
  curPlatMap.value = platMaps[gameTab]
}

// const onError = (i: number) => {
//   curPlatMap.value.gameList[i].visible = true
// }

// 第三方游戏信息返回
const gameUrlResult = (message: any) => {
  isLoading.value = false
  if (message.code != 0) {
    showToast.fail(message.msg)
    return
  }

  // let screenOrientation = '0' //默认竖屏
  if (message.url.indexOf('<!doctype html>') != -1) {
    // message.url = `data:text/html;charset=utf-8,${encodeURIComponent(
    //   String(message.url)
    // )}`

    if (target.value) {

      setTimeout(() => {
        target.value.postMessage({
          gameUrl: message.url
        }, location.origin)
      }, 1000);

    }

  }
  // Local.set('gameUrl', message.url)
  // router.push({
  //   path: "/openGame",
  //   query: {
  //     screenOrientation: screenOrientation
  //   }
  // });



}

const toGameDetail = async (item: any) => {
  console.log(item);
  if (item.has_next == 1) {
    // 跳转二级页面
    Session.set("activeTab", tabActive.value)
    router.push({
      path: 'gameDetail',
      query: {
        platform_id: item.id,
        venue_id: item.three_game_kind[0].id,
        name: item.name[lang.value].toUpperCase(),
        active: tabActive.value,
      }
    })
  } else {
    let langObj: any = {
      'en-US': 3,
      'vi-VN': 2,
      'zh-CN': 1
    }
    if (!Local.get('user')) {
      await User(pinia).setLogin(true)
      return
    }
    // 打开第三方游戏平台游戏列表
    isLoading.value = true
    let tb = NetPacket.req_3rd_game_login();
    tb.agentId = 4  //platform.three_game_kind_id;
    tb.gameId = '32' //platform.three_platform_id;
    tb.kindId = '999'   //platform.venue_id;
    tb.lang = langObj[lang.value];
    tb.device_type = 1  //2 为手机浏览器打开  后期使用此方法 getBlientType
    // Net.instance.sendRequest(tb);
    H5Websocket.sendMessageHandler(tb);
    target.value = window.open('/game_loading/loading.html')
  }


}

onBeforeMount(() => {
  i18n.global.locale.value = lang.value
  getHomeData()
  nextTick(() => {
    listContainerHeight.value = document.getElementById('scrollContainer')?.offsetHeight || 0
  })
})
onMounted(() => {

  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_3rd_game_login_result,
    gameUrlResult,
  );
}),
  onUnmounted(() => {
    MessageEvent2.removeMsgEvent(
      NetMsgType.msgType.msg_notify_3rd_game_login_result,
      null,
    );
  })

</script>

<style lang="scss" scoped>
.home {
  background-image: radial-gradient(circle at 50% 11%, #361e79, #202137 98%);
  font-size: 8px;
  //overflow-y: auto;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;

  .home_header {
    position: fixed;
    top: 0;
    flex-grow: 0;
    background-image: url(/imgs/home/top.webp);
    width: 100%;
    height: 50px;
    background-size: 100% 124%;
    background-repeat: no-repeat;
    padding: 0 8px 0 12px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 15px 15px;
    z-index: 2;

    .header_logo {
      width: 108px;
      height: 28px;
    }

    .header_right {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;

      .user_info_mon {
        font-size: 16px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        border-style: solid;
        border-width: .5px;
        border-color: #666;
        border-radius: 90px;
        margin-right: 10px;
        padding: 0 2px 0;

        .user_info_mon_text {
          flex-shrink: 0;
          min-width: 60px;
          text-align: right;

          padding-right: 10px
        }
      }

      .header_button {
        background: url(/imgs/home/btn_bg.webp) no-repeat !important;
        background-size: 100% 100% !important;
      }

      .login {
        width: 62px;
        height: 31px;
        border: none;
        background: radial-gradient(circle at 50% 14%, #4c36b3 0%, #3a2786 52%, #3c279a 69%), linear-gradient(to bottom, #fff 0%, #af9eff 100%);
        font-size: 12px;
        text-align: center;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
        border-radius: 12px;

      }

      .signup {
        width: 62px;
        height: 31px;
        border-radius: 12px;
        background: radial-gradient(circle at 50% 18%, #1170ff, #1154ff 41%, #1170ff 65%), linear-gradient(to bottom, #fff 0%, #8cacff 103%);
        font-size: 12px;
        text-align: center;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
        border: none;
      }

      // 刷新按钮
      .refresh {
        animation: refresh 1s linear infinite;
      }

      @keyframes refresh {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      .header_languages {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
  }

  .home_content {
    width: 355px;
    margin: 0 auto;
    margin-top: 50px;
    // overflow: hidden;

    display: flex;
    flex-direction: column;

    .home_download {
      width: 100%;
      height: 48px;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 50px;
      left: 0;
      padding: 0 8px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      z-index: 1;

      .download_left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        .download_logo {
          width: 36px;
          height: 36px;
          background-image: url(/imgs/home/down_load_logo.webp);
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .download_tips {
          height: 36px;
          color: #FFF;
          margin-left: 6px;

          .download_tips--top {
            height: 16px;
            line-height: 16px;
            font-size: 14px;
            margin-top: 4px;
          }

          .download_tips--bottom {
            height: 14px;
            font-size: 10px;
            line-height: 1;
            max-width: 180px;
          }
        }
      }

      .download_right {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;

        >.btn_block {
          width: 90px;
          height: 32px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          padding: 0 4px;
          text-align: center;
          line-height: 1;
        }

      }
    }

    .scroll-view {
      height: 405px;
      width: 100%;
    }

    .home_swipe {
      width: 100%;
      // height: 200px;
      position: relative;
      border-radius: 8px;
      // overflow: hidden;
      //margin-top: 10px;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.39), 0 2px 2px 0 rgba(0, 0, 0, 0.34), 0 5px 3px 0 rgba(0, 0, 0, 0.2), 0 8px 3px 0 rgba(0, 0, 0, 0.06), 0 13px 3px 0 rgba(0, 0, 0, 0.01);

      .nut-swiper {
        height: 100%;
      }

      :deep(.nut-swiper-pagination) {
        bottom: 40px;
      }

      :deep(.nut-swiper-pagination i) {
        height: 5px;
        width: 5px;
        margin-right: 3px;
      }

      :deep(.nut-swiper-pagination .active) {
        width: 20px;
      }

      .swiper_message {
        width: 100%;
        height: 26px;
        position: absolute;
        bottom: 0;

        &:deep(.nut-noticebar__page) {
          height: 100%;
          padding: 0 12px 0 0;
        }
      }

      .swiper_imgs {
        height: 141px;
      }
    }

    .home_grid {
      width: 100%;
      height: 70px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .grid_item {
        width: 80px;
        height: 60px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        :deep(.nut-popover-arrow) {
          top: -2px;
        }

        .grid_icon {
          width: 40px;
          height: 40px;
          margin: auto;

          .grid_icon--img {
            width: 40px;
            height: 40px;
          }
        }
      }

      .grid_text {
        font-size: 12px;
        white-space: nowrap;
        color: #FFF;
        height: 20px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
    }

    .home_main {
      width: 100%;
      // height: 50vh;
      overflow: auto;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 10px;
      margin-top: 6px;

      .main-content {
        width: 60px;
        // height: 50vh;
        // overflow-y: auto;

        .aside_item {
          height: 51px;
          margin-bottom: 8px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-radius: 10px;
          position: relative;
          box-shadow: inset 0 -0.9px 0 0 #4f38b7;
          background-image: radial-gradient(circle at 50% 13%, #4c36b3 0%, #3a2786 66%, #3c279a 88%) !important;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          user-select: none;


          .tab_style {
            width: 100%;
            height: 100%;
            margin: 10px auto 10px;
            transform: translateY(-4px);
          }

          .aside_item--text {
            position: absolute;
            bottom: 2px;
            font-size: 12px;
            pointer-events: none;
            caret-color: transparent;
          }
        }

        .aside_item:last-child {
          margin-bottom: 0;
        }

        .active_item {
          background-image: url(/imgs/home/tabActive.webp) !important;
          color: #fff;
        }
      }

      .game_list {
        width: 100%;
        // height: 50vh;
        // overflow-y: auto;
        display: flex;


        img {
          width: 100%;
        }

        .main-list-item {
          height: 110px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          position: relative;
          border-radius: 10px;

          &:nth-child(2n) {
            position: relative;
          }

          .main-list-item-img {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            height: 100%;
          }

          .main-list-item-img2 {
            width: 100%;
            position: absolute;
            right: 0;
            bottom: 0;
          }

          :deep(.nut-grid-item__content) {
            border-radius: 12px;
          }

          .title {
            font-size: 16px;
            margin: 11px 0 0 23px;
            color: #fff;
          }
        }

        .layout_item_1 {
          grid-column: span 2;
          border-radius: 10px;

          .main-list-item-img {
            width: 160px;
          }
        }

        .order_img {
          width: 53px !important;
          height: 60px;
          transform: translate(10px, 10px);
        }

        .layout_item_2 {
          grid-column: span 2;
          border-radius: 10px;

          .main-list-item-img {
            width: 300px;
            left: -10px;
          }
        }
      }
    }
  }
}

.languages_popover {
  width: max-content;
  background: url(/imgs/home/bg.webp) no-repeat;
  background-size: 100% 112%;
  padding: 10px 9px 8px 9px;

  .languages_popver--item {
    height: 32px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    color: #FFFFFF;
    padding: 0 10px;

    img {
      width: 28px;
      height: 28px;
    }

    .languages_img {
      width: 28px;
      height: 28px;
      margin-right: 8px;
    }
  }

  .item_line {
    // width: 41.1px;
    height: 1px;
    flex-grow: 0;
    margin: 5px auto 8px auto;
    opacity: 0.5;
    background-image: linear-gradient(to right, rgba(172, 177, 186, 0) 0%, #c8ccd2 50%, rgba(144, 149, 156, 0) 100%);
  }
}

.grid_popover {
  background: url(/imgs/home/dropdown_bg.webp) no-repeat -15px 0px;
  background-size: 115% 110%;
  padding-top: 10px;
  padding-bottom: 5px;
  transform: translate(-10px, -15px);

  &>.grid_popver--item {
    position: relative;
    padding: 10px 6px 10px 8px;
    // height: 48px;
    color: #93b4ff;
    display: flex;
    font-size: 12px;
    width: 200px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    &::after {
      content: "";
      position: absolute;
      bottom: -10px;
      left: 10px;
      width: 160px;
      height: 1px;
      flex-grow: 0;
      margin: 9px 0 9.5px;
      transform: rotate(-360deg);
      background-image: linear-gradient(to right, rgba(172, 177, 186, 0) 0%, #c8ccd2 50%, rgba(144, 149, 156, 0) 100%);
    }
  }

  &>.grid_popver--item:last-child {
    &:after {
      display: none;
    }
  }
}

.community {
  &>.grid_popver--item:first-child {
    padding-top: 15px;
  }
}

:deep(.nut-image) {
  height: 100%;

  .nut-img-error,
  .nut-img-loading {
    background: unset;
  }
}
</style>
